<template>
  <div class="goods-list">
    <!-- <router-link 
    class="goods-item" 
    v-for="item in goodslist" 
    :key="item.id"
    :to="'/home/goodsinfo'+ item.id"
    tag="div"
    >
      <img :src="item.img_rul" alt="">
      <h1 class="title">{{ item.title }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{ item.sell_price }}</span>
          <span class="old">￥{{ item.market_price }}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩{{ item.stock_quantity }}件</span>
        </p>
      </div>
    </router-link> -->


    <!-- 
      在网页中有两种跳转方式
      方式1：使用 a 标签跳转的形式叫做标签跳转
      方式2：使用window.location.href的形式叫做编程式导航(写js代买进行跳转) 
    -->
    <router-link 
    class="goods-item" 
    v-for="item in goodslist" 
    :key="item.id" @click="goDetail(item.id)">
    <!-- 
      @click="goDetail(item.id)
      为div定义一个点击事件，使之可以像router-link那样跳转
      传入一个id判断你点击的是苹果手机还是那个
    -->
      <img :src="item.img_rul" alt="">
      <h1 class="title">{{ item.title }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{ item.sell_price }}</span>
          <span class="old">￥{{ item.market_price }}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩{{ item.stock_quantity }}件</span>
        </p>
      </div>
    </router-link>
    <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data(){//data是往自己组建内部，挂在一些私有数据的
    return {
      pageindex:1, //分页的页数
      goodsList: [], //存放商品列表的数组
    }
  },
  created(){
    this.getGoodsList();
  },
  methods:{
    getGoodsList(){//获取商品列表
      this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result =>{
        if(result.body.status === 0){
          // this.goodsList = result.body.message;
          this.goodslist = this.goodslist.concat(result.body.message);
        }
      })
    },
    getMore(){
      this.pageindex++;
      this.getGoodsList();
    },
    goDetail(id){//使用js形式进行路由导航
      /*
        注意：一定要区分this.$route  和this.$router这两个对象
        其中this.$route是路由参数对象，所有路由中的参数，params，query都属于他
        其中this.$router  是一个路由导航对象，用它，可以方便的使用js 代码，实现路由的，前进，后退，跳转到新的URL地址
      */
      //这是最简单的js代码跳转页面的方式
      // this.$router.push('/home/goodsinfo/'+id)
      //2:传递对象
      // this.$router.push({path: '/home/goodsinfo/'+id})
      //3:传递命名的路由,这里的name:"goodsinfo",就是router.js中的{ path: '/home/goodsinfo/:id', component: GoodsInfo, name:'goodsinfo'}
      //paht和params不能同时使用
      this.$router.push({name: "goodsinfo", params:{ id: id}})
    }
  }
}
</script>
<style lang="scss" scoped>
  .goods-list{
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    justify-content: space-between;
    .goods-item{
      width: 49%;
      border: 1px solid #ccc;
      box-shadow: 0 0 8px #ccc;
      margin: 4px 0;
      padding: 2px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 290px;
      img{
        width: 100%;
      }
      .title{
        font-size: 14px;
      }
      .info{
        background-color: #eee;
        p{
          margin: 0;
          padding: 3px;
        }
         .price{
           .now{
             color: red;
             font-weight: bold;
             font-size: 16px;
           }
           .old{
             font-size: 12px;
             margin-left: 10px;
             text-decoration: line-through;
             /*
              text-decoration 属性规定添加到文本的修饰。             
              值	描述
              none	默认。定义标准的文本。
              underline	定义文本下的一条线。
              overline	定义文本上的一条线。
              line-through	定义穿过文本下的一条线。
              blink	定义闪烁的文本。
              inherit	规定应该从父元素继承 text-decoration 属性的值。
             */
           }
         }
         .sell{
           display: flex;
           justify-content: space-between;
         }
      }
    }
  }
</style>

